<template>
  <e-charts v-if="loadFlag" class="chart" :option="option"/>
  <el-scrollbar height="100vh" v-show="!loadFlag">
    <div ref="test1" class="animate__animated">文字文字文字文字文字文字</div>
    <div ref="test2" class="animate__animated">文字文字文字文字文字文字</div>
    <div class="animate__animated"  style="height: 130vh;">文字文字文字文字文字文字</div>

    <div ref="targetComponent" class="animate__animated">文字文字文字文字文字文字</div>
  </el-scrollbar>
</template>

<script>
import {ref, unref, getCurrentInstance, watch, reactive, onMounted, onUnmounted} from "vue";// eslint-disable-line no-unused-vars

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  setup(props, content) {// eslint-disable-line no-unused-vars
    const {proxy} = getCurrentInstance();

    const targetComponent = ref()
    const test1 = ref()
    const test2 = ref()
    let data = {
      option: ref(),
      loadFlag: ref(true),
      observerList: ref([]),
      refList: ref([targetComponent,test1,test2]),//ref集合
      animateList: ref(['animate__zoomIn','animate__zoomIn','animate__fadeInDown']),//ref对应动画
    }
    onMounted(async () => {
      data.option.value = {
        graphic: {
          elements: [
            {
              type: 'text',
              left: 'center',
              top: 'center',
              style: {
                text: '♥ 叶 落 无 秋 ♥',
                fontSize: 80,
                fontWeight: 'bold',
                lineDash: [0, 200],
                lineDashOffset: 0,
                fill: 'transparent',
                stroke: '#000',
                lineWidth: 1
              },
              keyframeAnimation: {
                duration: 3000,
                loop: true,
                keyframes: [
                  {
                    percent: 0.7,
                    style: {
                      fill: 'transparent',
                      lineDashOffset: 200,
                      lineDash: [200, 0]
                    }
                  },
                  {
                    // Stop for a while.
                    percent: 0.8,
                    style: {
                      fill: 'transparent'
                    }
                  },
                  {
                    percent: 1,
                    style: {
                      fill: 'black'
                    }
                  }
                ]
              }
            }
          ]
        }
      };

      methods.loadApiData();

      methods.loadObserver()
    })
    // 在组件卸载时停止观察

    onUnmounted(() => {
      methods.closeObserver()
    });
    let methods = {
      //加载api数据，全局获取后进行动画展示
      loadApiData() {
        setTimeout(() => {
          data.loadFlag.value = false
        }, 1000)
      },
      //加载视窗监听
      loadObserver(){
        let refs = data.refList.value
        let observers = []
        if (refs && refs.length > 0){
          refs.forEach((e, index) => {
            let ob = new IntersectionObserver( (entries, observer) => methods.handleIntersection(entries, observer, e, data.animateList.value[index]), {
              threshold: 0.1, // 当目标元素 10% 进入视口时触发
            });
            ob.observe(e.value)

            observers.push(ob)
          })
        }
        data.observerList.value = observers
      },
      //关闭视窗监听
      closeObserver(){
        let observers = data.observerList.value
        if (observers && observers.length > 0){
          observers.forEach(e => {
            e.disconnect()
          })
        }
      },
      //视窗监听回调
      handleIntersection(entries, observer,refEl,animate) {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            // console.log('目标组件进入了视口！');
            // 在这里执行你想要的操作
            refEl.value.classList.add(animate);
          } else {
            // console.log('目标组件离开了视口');
            refEl.value.classList.remove(animate);
          }
        });
      }
    }

    return {
      proxy,
      targetComponent,
      test1,
      test2,
      ...data,
      ...methods
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.chart {
  width: 100vw;
  height: 100vh;
}
</style>
